<template>
	<my-field :label="data.label" :needRightIcon="false">
		<!-- <view class="float-right"> -->
			<u-radio-group v-if="data.config.isRemote" v-model="obj.value" :disabled="data.readonly" class="flex-1" activeColor="#2d58cb">
				<view class="w-full grid" :class="remoteDataLen > 3? ['grid-cols-3 gap-3']:['grid-cols-' + remoteDataLen]">
					<u-radio v-for="(option,i) in remoteData" :key="i" :label="option[data.config.remoteDataProps.label]"
						:name="option[data.config.remoteDataProps.value]"></u-radio>
				</view>
			</u-radio-group>
			<u-radio-group v-else v-model="obj.value" :disabled="data.readonly" class="flex-1" activeColor="#2d58cb">
				<view class="w-full grid" :class="data.selections.length > 3? ['grid-cols-3 gap-3']:['grid-cols-' + data.selections.length]">
					<u-radio v-for="(option,i) in data.selections" :key="i" :label="option.label" :name="option.value"></u-radio>
				</view>
			</u-radio-group>
		<!-- </view> -->
	</my-field>
</template>
<script>
import RemoteMixin from '../js/remote-mixin'
import MyField from '@/pages_form/components/my-field.vue'
export default {
	mixins: [ RemoteMixin ],
	components: {MyField},
    props: {
        data: {
            type: Object,
            required: true
        }
    },
	data() {
		return {
			remoteDataLen: 0,
			obj: JSON.parse(JSON.stringify(this.data))
		}
	},
    watch:{
       obj: {
    	   deep: true,
    	   handler() {
    		   this.$emit('fieldValueChange', this.obj)
    	   }
       },
	   remoteData: {
    	   deep: true,
    	   handler() {
    		  this.remoteDataLen = this.remoteData.length
    	   }
       },
    },
}
</script>
<style scoped>
.self-cell >>> .van-cell__title {
    -webkit-box-flex: 0;
    -webkit-flex: none;
    flex: none;
    box-sizing: border-box;
    width: 6.2em;
    margin-right: 12px;
    color: #646566;
    text-align: left;
    word-wrap: break-word;
}
.self-cell >>> .van-radio:not(:last-child) {
    padding-bottom: 8px;
}
.self-cell__readonly >>> .van-radio--disabled .van-radio__label--disabled{
    color: #323233;
}
.self-cell__readonly >>> .van-radio__icon--disabled.van-radio__icon--checked .van-icon {
    color: #fff;
    background-color: #1989fa;
    border-color: #1989fa;
}
</style>
